<script setup>
import { defineEmits } from "vue";
import { QrStream } from "vue3-qr-reader";
const emit = defineEmits(["onScan"]);
function onDecode(params) {
    emit("onScan", params);
}
</script>

<template>
    <div class="container">
        <div class="title">请将二维码放入下方取景框</div>
        <div class="preview">
            <qr-stream @decode="onDecode"></qr-stream>
        </div>
    </div>
</template>

<style scoped lang="less">
.container {
    box-sizing: border-box;
}

.title {
    font-size: 24px;
    text-align: center;
    margin: 16px 0;
}

.preview {
    width: 100%;
    height: 100%;
    border: 1px solid #0052d9;
}
</style>